
<template>
    <div class="hadoop">
        <div class="head">
            <h2>大屏数据统计分析显示</h2>
        </div>
        <div class="body">
            <div class="left">
                <div class="left1">
                    <Left1 />
                </div>
                <div class="left2">
                    <left2 />
                </div>
                <div class="left3">
                    <left3 />
                </div>
            </div>
            <div class="center">
                <div class="center1">
                    <div>
                        <p>积累销量</p>
                        <p>220,000</p>
                    </div>
                    <div>
                        <p>积累销量金额</p>
                        <p>58,000,000</p>
                    </div>
                    <div>
                        <p>购买人数</p>
                        <p>15,000</p>
                    </div>
                </div>
                <div class="center2">
                    <Center2></Center2>
                </div>
                <div class="center3">
                    <Center3></Center3>
                </div>
            </div>
            <div class="right">
                <div class="right1">
                    <Right1 />
                </div>
                <div class="right2">
                    <Right2 />
                </div>
                <div class="right3">
                    <p class="title">商品销售排行</p>
                    <div class="aa">
                        <span>排名</span>
                        <span>商品名称</span>
                        <span>销量</span>
                        <span>销售金额</span>
                    </div>
                    <div>
                        <span>
                            <p class="one">1</p>
                        </span>
                        <span>卡帝乐鳄鱼</span>
                        <span>2,200</span>
                        <span>360,00</span>
                    </div>
                    <div>
                        <span>
                            <p class="two">2</p>
                        </span>
                        <span>春夏男T恤 </span>
                        <span>1,700</span>
                        <span>24,500</span>
                    </div>
                    <div>
                        <span>
                            <p class="three">3</p>
                        </span>
                        <span>男女同款休闲鞋</span>
                        <span>1,120</span>
                        <span>12,700</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup>
import Left1 from   '../../components/Hadoop/HadoopLeft1.vue'
import left2 from   '../../components/Hadoop/HadoopLeft2.vue'
import Left3 from   '../../components/Hadoop/HadoopLeft3.vue'
import Center2 from '../../components/Hadoop/HadoopCenter2.vue'
import Center3 from '../../components/Hadoop/HadoopCenter3.vue'
import Right1 from  '../../components/Hadoop/HadoopRight1.vue'
import Right2 from  '../../components/Hadoop/HadoopRight2.vue'
</script>
<style scoped lang='scss'>
.hadoop {
    width: 100vw;
    height: 100vh;
    background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 800'%3E%3Cdefs%3E%3CradialGradient id='a' cx='0' cy='800' r='800' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%230e0077'/%3E%3Cstop offset='1' stop-color='%230e0077' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='b' cx='1200' cy='800' r='800' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%2314057c'/%3E%3Cstop offset='1' stop-color='%2314057c' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='c' cx='600' cy='0' r='600' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%230d0524'/%3E%3Cstop offset='1' stop-color='%230d0524' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='d' cx='600' cy='800' r='600' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%231400a8'/%3E%3Cstop offset='1' stop-color='%231400a8' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='e' cx='0' cy='0' r='800' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0'/%3E%3Cstop offset='1' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='f' cx='1200' cy='0' r='800' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23130733'/%3E%3Cstop offset='1' stop-color='%23130733' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cpath fill='url(%23a)' d='M0 0h1200v800H0z'/%3E%3Cpath fill='url(%23b)' d='M0 0h1200v800H0z'/%3E%3Cpath fill='url(%23c)' d='M0 0h1200v800H0z'/%3E%3Cpath fill='url(%23d)' d='M0 0h1200v800H0z'/%3E%3Cpath fill='url(%23e)' d='M0 0h1200v800H0z'/%3E%3Cpath fill='url(%23f)' d='M0 0h1200v800H0z'/%3E%3C/svg%3E") no-repeat 0 0 /100vw;

    .head {
        height: 10%;
        background: url('../../../public/img/head_bg.eeff3da5.png  ')no-repeat center 0 /100vw 70px;

        h2 {
            font-size: 2em;
            color: white;
            text-align: center;
            padding-top: 10px;
        }
    }

    .body {
        height: 90%;
        display: flex;
        justify-content: space-around;

        .left {
            width: 28%;
            // height: (100vh-);
            display: flex;
            flex-direction: column;
            justify-content: space-between;

            .left1,
            .left2,
            .left3 {
                width: 100%;
                height: 32%;
                border: 1px solid #0c2948;
            }
        }

        .center {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            width: 40%;

            // border: 1px solid #eee;
            .center1 {
                height: 80px;
                width: 100%;
                border: 1px solid #0c2948;
                display: flex;
                justify-content: space-around;

                div {
                    text-align: center;
                    width: 33%;
                    box-sizing: border-box;
                    padding: 10px;

                    p:nth-child(1) {
                        color: #fcf0d8;
                        font-size: 14px;
                    }

                    p:nth-child(2) {
                        font-size: 34px;
                        font-weight: 700;
                        color: #67caca;
                    }
                }
            }

            .center2 {
                height: 36%;
            }

            .center3 {
                height: 50%;
            }
        }

        .right {
            width: 28%;
            // height: (100vh-);
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: center;

            .right1,
            .right2 {
                width: 100%;
                height: 32%;
                border: 1px solid #0c2948;
            }

            .right3 {
                width: 100%;
                height: 32%;
                border: 1px solid #0c2948;
                box-sizing: border-box;
                padding: 10px;

                .title {
                    color: white;
                    text-align: center;
                    margin-bottom: 10px;
                }

                .aa {
                    border: none;
                }

                div {
                    width: 100%;
                    display: flex;
                    justify-content: space-between;
                    padding: 15px 0;

                    border-top: 1px solid #00a7b4;

                    span {
                        width: 25%;
                        display: block;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        color: white;
                    }

                    span:nth-child(1) {
                        p {
                            text-align: center;
                        }

                        width: 10%;
                    }

                    span:nth-child(2) {
                        width: 40%;
                    }

                    span:nth-child(3) {
                        width: 20%;
                    }

                    span:nth-child(4) {
                        width: 20%;
                    }
                }

                .one {
                    width: 20px;
                    height: 20px;
                    border-radius: 5px;
                    background-color: red;
                }

                .two {
                    width: 20px;
                    height: 20px;
                    border-radius: 5px;
                    background-color: green;
                }

                .three {
                    width: 20px;
                    height: 20px;
                    border-radius: 5px;
                    background-color: skyblue;
                }
            }
        }

        .left1,
        .left2,
        .left3,
        .center1,
        .center2,
        .center3,
        .right1,
        .right2,
        .right3 {

            background: linear-gradient(to top, #00a7b4, #00a7b4) left top no-repeat,
                /*上左*/
                linear-gradient(to right, #00a7b4, #00a7b4) left top no-repeat,
                /*左上*/
                linear-gradient(to left, #00a7b4, #00a7b4) right top no-repeat,
                /*上右*/
                linear-gradient(to bottom, #00a7b4, #00a7b4) right top no-repeat,
                /*上右*/
                linear-gradient(to left, #00a7b4, #00a7b4) left bottom no-repeat,
                /*下左*/
                linear-gradient(to bottom, #00a7b4, #00a7b4) left bottom no-repeat,
                /*左下*/
                linear-gradient(to top, #00a7b4, #00a7b4) right bottom no-repeat,
                /*下右*/
                linear-gradient(to left, #00a7b4, #00a7b4) right bottom no-repeat;
            /*右下*/
            background-size: 2px 16px, 16px 2px, 2px 16px, 16px 2px;
            background-color: rgba(16, 22, 44, 0.21);
        }

    }
}
</style>
